<template>
    <!-- 使用的时流体高度组件 -->
    <div class="table">
      <div class="search">  <el-input v-model="input" placeholder="请输入用户名" style="width:200px" ></el-input>
        <el-button icon="el-icon-search" circle @click="searchMovie" style="margin-left:8px"></el-button>
      </div>
    
      <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column align="center"
        fixed
        prop="id"
        label="ID"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="name"
        label="用户名"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="imgSrc"
        label="头像路径"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="content"
        label="评论内容"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="date"
        label="评论时间"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="title"
        label="评论的电影名"
        width="">
      </el-table-column>
      <el-table-column align="center"
        fixed="right"
        label="操作"
        width="">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index,tableData,scope.row)"
            type="text"
            size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  <!-- 分页 -->
  
  <div class="page">
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size=this.pagesize
      layout="total, sizes, prev, pager, next, jumper"
      :total=this.total>
    </el-pagination>
  </div>
  
  
    <!-- 对话框表单 -->
    <!-- <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="title" label-width="120px">
      <el-input v-model="form.title" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="type" label-width="120px">
      <el-input v-model="form.type" autocomplete="off"></el-input>
    </el-form-item> -->
      <!-- <el-form-item label="videoSrc" label-width="120px">
      <el-input v-model="form.videoSrc" autocomplete="off"></el-input>
     </el-form-item> -->
    
  <!-- </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary"  @click="submit">确 定</el-button>
  </div>
  </el-dialog> -->
  
    </div>
   
  </template>
  
  <script>
  
  
    export default {
  
       created(){
        this. getMovieDate()
       }
   
  
  
   ,
  //  async updated(){
  //     this.getUserDate()
  //   },
      methods: {
    
    deleteRow(index, rows,currentRow) {
      // console.log(currentRow.id)
      let all=(this.total-1)
        let newPages=Math.ceil(all/this.pagesize)
        if(this.currentPage>newPages){
            this.handleCurrentChange(this.currentPage-1)
                index=index+this.currentPage*this.pagesize
                rows.splice(index,1);
          }else{
            index=index+(this.currentPage-1)*this.pagesize
          }
  
  
          this.$axios({
              url:this.$host+"/deletesComment",
              method:"get",
              params:{
               
                  id:currentRow.id
              }  
             
          }).then(resp=>{
            this. getMovieDate()
          })  
     
         
      },
      // 修改用户信息
    //   handleEdit(index,rows,currentRow){
    //     //点击修改打开对话框
    //      this.dialogFormVisible=true
    //      this.form=currentRow
         
    //   },
      // 上传修改信息
    //   submit(){
    //     this.dialogFormVisible=false
    //     console.log(this.form.id,this.form.title)
    //     this.$axios({
    //          url:this.$host+"/updateMovie",
    //          method:"get",
    //          params:{
    //             id:this.form.id,
    //             title:this.form.title,
    //             type:this.form.type,
    //            videoSrc:this.form.videoSrc
    //          }
    //     }).then(resp=>{
    //           console.log(resp.data)
    //     })
    //   },
      searchMovie(){
          //搜索指定电影的
          // console.log(this.input)
          this.$axios({
             url:this.$host+"/searchComment",
             method:"get",
             params:{
               title:this.input
             }
          }).then(resp=>{
              // console.log(resp.data)
              if(resp.data.length>this.pagesize){
                // start=(this.currentPage-1)*this.pagesize
                //      last= this.currentPage*this.pagesize
                //      newArr=resp.data.slice(start,last)
                this.getMovieDate()
              }else{
                this.tableData=resp.data
              }
              
          })
      },
      // 分页
      getMovieDate(){
             this.$axios({
              url:this.$host+"/getCommentDate",
               method:"get",
               params:{
                currentPage:this.currentPage,
                pagesize:this.pagesize
                 
               }
             }).then(resp=>{
              this.tableData=[] 
               this.tableData=resp.data[0]
               this.total=resp.data[1]
             })
  
       }
      ,
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize=val
        this. getMovieDate()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val
        this. getMovieDate()
      },
      
    },
   
      data() {
        return {
          tableData: [],
          // 修改对话框是否打开
          dialogFormVisible: false,
          form: {
         title: '',
          type: '',
          videoSrc:""
          ,
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        input: ''
       ,
        currentPage:1,
        pagesize:5,
        total:0
       
     
        }
      }
    }
  </script>
  <style scoped>
  .table{
    margin-top: 80px; 
   
  }
  .search{
     margin-left: 120px;
     margin-bottom: 20px;
  }
  .page{
         margin-top:35px;
         margin-left: 70px;
        
  }
  </style>